import { Header, ScrollView, TopView, GroupList, DropDown, Text, Space } from 'pd-taro-ui';
import { toast } from '@/utils/util';
import { View } from '@tarojs/components';

const menus1 = [{ text: '菜单1' }, { text: '菜单2' }, { text: '菜单3' }, { text: '菜单4' }];

const menus2 = [{ text: '菜单1' }, { type: 'line' }, { text: '菜单2' }, { text: '菜单3' }, { type: 'line' }, { text: '菜单4' }];

export default function DropDownExample() {
  return (
    <TopView>
      <Header title='DropDown' />
      <ScrollView>
        <GroupList>
          <GroupList.Item title='下拉菜单' desc=''>
            <DropDown menuList={menus1} onSelect={({ item }) => toast(item.text)}>
              <View>点击弹出</View>
            </DropDown>
          </GroupList.Item>
          <GroupList.Item title='分割线' desc=''>
            <DropDown menuList={menus2} onSelect={({ item }) => toast(item.text)}>
              <View>点击弹出</View>
            </DropDown>
          </GroupList.Item>
          <GroupList.Item title='弹出自定义内容' desc=''>
            <DropDown
              renderContent={
                <Space style={{ padding: 12, backgroundColor: '#fff' }}>
                  <Text>菜单1</Text>
                  <Text>菜单2</Text>
                  <Text>菜单3</Text>
                  <Text>自定义内容</Text>
                </Space>
              }>
              <View>点击弹出</View>
            </DropDown>
          </GroupList.Item>
        </GroupList>
      </ScrollView>
    </TopView>
  );
}
